<%@ page import="java.sql.Connection" %>
<%@ page import="java.sql.DriverManager" %>
<%@ page import="java.sql.PreparedStatement" %>
<%@ page import="java.sql.ResultSet" %>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>人机大战之成语接龙</title>
    <style>
        h1{
            color: red;
        }
        .history{
            border: 1px solid gray;
            padding: 10px;
            border-radius: 10px;
            min-height: 150px;
        }
        .msg{
            color: red;
            font-weight: bold;
            margin: 10px 0; /* 上下10px，左右0 */
        }
        form>div:nth-child(2){
            display: flex;
            gap: 10px;
        }
        input{
            padding: 8px;
        }
    </style>
</head>
<body><%
boolean isWin=false; //人赢了吗？
String first=""; //成语的首字
String msg=""; //错误信息
request.setCharacterEncoding("utf-8");//仅仅对POST方法提交的请求体的数据起作用
String cy=request.getParameter("cy"); //接收用户输入的成语
String history=request.getParameter("history"); //接龙历史
if(history==null) history="";
out.print(cy+"  "+history);
if(cy!=null){ //用户提交表单数据 一清清清二白
    cy=cy.trim(); //删除成语两端的空白
    Class.forName("com.mysql.cj.jdbc.Driver");
    try(Connection cn= DriverManager.getConnection("jdbc:mysql://localhost:3306/db","root","12qwas")){
        try(PreparedStatement ps=cn.prepareStatement("select * from chengyu where cy=?")){
            ps.setString(1,cy);
            try(ResultSet rs= ps.executeQuery()){
                if(!rs.next()){
                    first=cy.substring(0,1);//人接龙的首字
                    throw new Exception("Sorry, 你输入的“"+cy+"”不是成语~");
                }
                history+=","+cy; //把用户接龙的成语加入接龙历史中
                first=cy.substring(cy.length()-1); //计算机接龙的首字
                out.print(history);
                //计算机接龙, 写在下面的第三行了
            }
        }
        try(PreparedStatement ps=cn.prepareStatement("select cy from chengyu where first=? order by rand() limit 1")){
            ps.setString(1,first); //计算机接龙的首字
            try(ResultSet rs= ps.executeQuery()){
                if(rs.next()){ //计算机接龙成功
                    cy=rs.getString("cy"); //计算机接龙的成语
                    history+=","+cy; //把计算机接龙的成语加入接龙历史中
                    first=cy.substring(cy.length()-1); //人接龙的首字
                }else{ //计算机接龙失败，人赢啦
                    msg="祝贺你在成语接龙游戏中战胜了计算机~";
                    isWin=true;
                }
            }
        }
    }catch(Exception e){
        msg=e.getMessage();
    }
    //。。。
    //history=",一清二白,白面儒生,生生不息,息息相关";
}else{ //用户首次请求该页面

}

%>
<div class='kuang'>
    <h1>人机大战之成语接龙</h1>
    <div class='history'>
<%
String[] cys=history.split(",");
for(int i=1;i<cys.length;++i){
    out.println("\t\t<p>"+i+". ["+(i%2==0?"机":"人")+"] "+cys[i]+"</p>");
}
%>
    </div>
    <form method="post" action="">
        <div class='msg'><%=msg%></div>
        <div>
            <input type='text' name='cy' <%=isWin?"disabled":""%> />
            <input type="submit" value='提交' onclick="return check()" <%=isWin?"disabled":""%> />
            <input type="button" value='重新开始' onclick="again()" />
            <input type='hidden' name='history' value='<%=history%>' />
        </div>

    </form>
</div>
<script>
    const $=function(selector){ //返回根据selector找到的第一个对象
        return document.querySelector(selector)
    }
    function again(){
        location.href='' //重新加载当前页面
    }
    function check(){
        let first='<%=first%>' //用户接龙时成语的第一个字
        let cy=$('input[name=cy]').value //获取用户输入的成语
        cy=cy.trim() //删除两端的空白
        console.log(cy)
        // if(cy.length<3||cy.length>14){
        //     $('.msg').innerText='Sorry，成语应该有3~14个汉字~'
        //     return false //false表单不能提交，true可以提交
        // }
        // if(!cy.startsWith(first)){
        //     $('.msg').innerText='Sorry, 你输入的“'+cy+'”必须以“'+first+'”字开头~'
        //     return false
        // }
        // return true //客户端检测没有问题，可提交表单
        try{
            if(cy.length<3||cy.length>14) throw new Error('Sorry，成语应该有3~14个汉字~')
            if(!cy.startsWith(first)) throw new Error('Sorry, 你输入的“'+cy+'”必须以“<%=first%>”字开头~')
            return true //没有问题，就提交表单
        }catch(e){
            $('.msg').innerText=e.message //显示错误信息
            return false //没有通过客户端检测，无需提交
        }
    }
</script>
</body>
</html>

